<template>
  <!--新增用户-->
  <div class="page">
    <el-form :rules="rules" :model="addParams" ref="add-form" label-width="100px" align="left">
      <el-row type="flex" justify="">
        <el-col class="pad">个人基本信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属机构" prop="deptId">
            <el-cascader v-model="addParams.deptId" :options="departmentData" :props="{ value: 'id', label: 'deptName', checkStrictly: true }" :show-all-levels="false" @change="orgChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model.trim="addParams.userName" size="small" :maxlength="20" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否管理员" prop="isAdmin">
            <el-select v-model="addParams.isAdmin" size="small">
              <el-option v-for="item in administrator" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="userStatus">
            <el-select v-model="addParams.userStatus" size="small">
              <el-option v-for="{ index, name, code } in $dict.getDictData(
                  'CommonState'
                )" :key="index" :label="name" :value="code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="realName">
            <el-input v-model.trim="addParams.realName" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用工形式" prop="userForm">
            <el-input v-model.trim="addParams.userForm" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="addParams.idCard" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职时间" prop="entryTime">
            <el-date-picker v-model.trim="addParams.entryTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.trim="addParams.phone" size="small" :maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="住宅地址" prop="area">
            <el-input v-model.trim="addParams.area" size="small" :maxlength="30"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col :span="12"> -->
        <el-col :span="12">
          <el-form-item label="毕业院校" prop="graduateSchool">
            <el-input v-model.trim="addParams.graduateSchool" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业专业" prop="education">
            <el-select v-model="addParams.education" size="small">
              <el-option v-for="{ index, name, code } in $dict.getDictData(
                  'Education'
                )" :key="index" :label="name" :value="code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="紧急联系人关系" prop="relationShip">
            <el-input v-model.trim="addParams.relationShip" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急联系人姓名" prop="relationName">
            <el-input v-model.trim="addParams.relationName" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="紧急联系人手机" prop="relationPhone">
            <el-input v-model.trim="addParams.relationPhone" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col class="pad">分案相关信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="show">
          <el-form-item label="经办代号" prop="handCode">
            <el-input v-model="addParams.handCode" :disabled="true" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经办电话" prop="handPhone">
            <el-input v-model.trim="addParams.handPhone" size="small" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分案开关" prop="caseSwitch">
            <el-select v-model="addParams.caseSwitch" clearable>
              <el-option v-for="{ index, name, code } in $dict.getDictData(
                  'SwitchState'
                )" :key="index" :label="name" :value="code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="confirm-button">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="addUserCommit">确定</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State, Mutation, Getter, namespace } from "vuex-class";
import { UserService } from "~/services/management-service/user.service";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { OPERATION_TYPE } from "~/config/enum.config";
import clone from "clone";

const systemManageModule = namespace("system-manage");

@Component({
  components: {}
})
export default class AddUser extends Vue {
  @Dependencies(UserService)
  private userService: UserService;
  @Prop()
  private deptId: any;
  @Prop()
  private password: any;
  @State
  private companyList: any;
  @State
  private departmentList: any;
  @systemManageModule.State
  private orgInfo;
  @Getter
  private departmentData;
  @State
  private userData;
  @Prop() private userObj: any;
  @Prop() private operationType;
  private show: boolean = false; // 隐藏经办代号
  private addParams: any = {
    userStatus: "ENABLED",
    education: "",
    isAdmin: "0",
    caseSwitch: "CLOSE",
    deptId: "",
    password: "",
    deptType: "",
    userName: "",
    realName: "",
    idCard: "",
    phone: "",
    relationPhone: "",
    userForm: "",
    area: "",
    entryTime: "",
    graduateSchool: "",
    relationName: "",
    relationShip: "",
    handPhone: "",
    department: ''
  };
  private deptIds: any = [];
  private administrator = [
    { value: "1", label: "是" },
    { value: "0", label: "否" }
  ];
  private rules: any = {
    deptId: [
      { required: true, message: "请选择所属机构", trigger: ["change", "blur"] }
    ],
    realName: [
      { required: true, message: "请输入用户姓名", trigger: "blur" },
      {
        message: "请输入汉字或英文字母",
        trigger: "blur",
        pattern: /^([\u4e00-\u9fa5]+|([a-zA-Z]+\s?)+)$/
      }
    ],
    // isAdmin: [{ required: true, message: "请选择管理员状态", trigger: "blur" }],
    idCard: [
      { required: true, message: "请输入身份证号", trigger: "blur" },
      {
        message: "请输入正确的身份证号码",
        trigger: "blur",
        validator: this.$validator.idCard
      }
    ],
    phone: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      {
        message: "请输入正确的手机号码",
        validator: this.$validator.phoneNumber,
        trigger: "blur"
      }
    ],
    // userName: [{ required: true, message: "请输入登陆账号", trigger: "blur" },
    //   { pattern: /^[A-Za-z0-9]+$/, message: "请输入英文字母或数字", trigger: "blur" }
    // ],
    relationPhone: [
      {
        required: false,
        validator: this.$validator.phoneNumber,
        trigger: "blur"
      }
    ],
    handPhone: [
      {
        required: false,
        validator: this.$validator.phoneNumber,
        trigger: "blur"
      }
    ]
  };

  @Emit("close") private emitClose () { }
  @Emit("refreshData") private emitRefreshData () { }

  /**
   * 编辑时初始化页面
   */
  private refreshData () {
    this.dataHandler();
    this.show = true;
    this.addParams = { ...this.userObj, isAdmin: String(this.userObj.isAdmin) };
  }

  /**
   * 新增初始化页面
   */
  private refresh (dept) {
    this.dataHandler();
    this.addParams.deptId = this.deptId;
    this.show = false;

  }

  private dataHandler () {
    //   重置form表单
    const addForm: any = this.$refs["add-form"];
    addForm.resetFields();
    this.addParams.deptId = this.deptId
  }

  /**
   * 机构改变
   */
  private orgChange (e) {
    this.deptIds = e
    if (this.deptIds.length < 1) {
      return;
    }
    const deptId = this.deptIds[this.deptIds.length - 1];
    const deptModel: any = this.departmentList.find(x => x.id === deptId);
    this.addParams.department = deptModel;
    this.addParams.deptCode = deptModel.deptCode;
    this.addParams.deptId = deptId;
  }

  // 

  /**
   * 新增/编辑用户
   */
  private addUserCommit () {
    if (this.operationType.DEFAULT === "OPERATION_EDIT") {
      this.editBtn();
    } else {
      this.createBtn();
    }
  }
  /**
   * 保存编辑用户
   */
  private editBtn () {
    const modifyForm: any = this.$refs["add-form"];
    modifyForm.validate(valid => {
      if (!valid) return false;
      this.userService.modifyUser(this.addParams).subscribe(data => {
        this.handler();
      });
    });
  }

  private handler () {
    this.emitClose();
    this.$message.success("操作成功!");
    this.deptIds = [];
    //   刷新databox
    this.emitRefreshData();
  }
  /**
   * 保存新增用户
   */
  private createBtn () {
    if (typeof this.addParams.deptId !== 'string') {
      this.addParams.deptId = this.addParams.deptId[this.addParams.deptId.length - 1]
    }
    const addForm: any = this.$refs["add-form"];
    addForm.validate(valid => {
      if (!valid) return false;
      this.addParams.password = this.password;
      this.userService.createUser(this.addParams).subscribe(data => {
        this.handler();
      });
    });
  }
}
</script>
<style lang="less" scoped>
.data-grid {
  margin-bottom: 10px;
}

.header {
  border: solid 1px #dee1e5;
  border-bottom: 0px;
  height: 40px;
  line-height: 40px;
}
.pad {
  padding-bottom: 10px;
  font-weight: bold;
}

.el-select-dropdown__item.selected {
  font-weight: normal;
}
</style>
